<script setup lang="ts">
import * as echarts from 'echarts'
import { inject, onMounted, ref, watch } from 'vue'

const chartRef = ref(null)

const mtfInfo = inject('mtfInfo') as any



onMounted(() => {
  var myChart = echarts.init(chartRef.value)

  watch(mtfInfo, (newValue, oldValue) => {
    console.log("mtf",newValue)
    const option = {
      xAxis: {
        type: 'category',
        data: newValue.freq,
        nameLocation: 'middle',
        nameGap: 30,
        name:"Frequency (cycles/pixel)"
      },
      yAxis: {
        type: 'value',
        name: 'MTF'
      },
      title: [
        {
          left: 'center',
          text: 'Modulation Transfer Function'
        }
        ],
      series: [
        {
          data: newValue.mtf,
          type: 'line',
          showSymbol: false,
        }
      ]
    }
    myChart.setOption(option)

  })

})
</script>

<template>
  <div class="w-full h-full" ref="chartRef">

  </div>
</template>

<style scoped>

</style>
